<template>
    <div class="login-bg">
        <div class="login-form">
            <div class="login-header">用户注册</div>
            <el-form ref="registerRef" :model="registerForm" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="registerForm.username" placeholder="输入用户名" prefix-icon="user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="registerForm.password" type="password" placeholder="输入密码" prefix-icon="lock"
                        show-password></el-input>
                </el-form-item>
                <el-form-item prop="confirm_pwd">
                    <el-input type="password" v-model="registerForm.confirm_pwd" placeholder="确认密码" prefix-icon="lock"
                        show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="form-item-ext">
                        <span></span>
                        <div class="reg">
                            已有账号? <el-link type="primary" :underline="false"
                                @click="$router.push('/login')">立即登录</el-link>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="user.loading" class="login-btn" type="primary" @click="doRegister(registerRef)">立即注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { register, loginApi } from "@/api/login"
import { encrypt } from "@/utils/encrypt"
import { ElMessage } from 'element-plus';
import useUserStore from "@/store/modules/user";
import { useRouter } from 'vue-router';
const user = useUserStore();
const router = useRouter();
let activeName = ref("login");
const loginRef = ref(null);
const registerRef = ref(null);

let registerForm = reactive({
    username: "",
    password: "",
    confirm_pwd: "",
})

const valid_confirm_pwd = (rule, value, callback) => {
    console.log(registerForm.password, value, "确认密码....")
    if (value === "") {
        callback(new Error(rule.default_message))
    } else if (value !== registerForm.password) {
        console.log("xxxx");
        callback(new Error("密码确认密码不一致"))
    } else {
        callback();
    }
}
const rules = {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    confirm_pwd: [{ validator: valid_confirm_pwd, default_message: "请输入确认密码", trigger: "blur" }],
}

const doRegister = async (reg) => {
    user.loading = true;
    if (!reg) return;
    await reg.validate(async valid => {
        if (valid) {
            let res = await user.register(registerForm);
            if (res.code === 200) {
                ElMessage({
                    type: "success",
                    message: "注册成功"
                })
                router.push("/login");
            } else {
                ElMessage({
                    type: "error",
                    message: res.msg
                })
            }
            user.loading = false;
        } else {
            console.error("注册校验失败")
            user.loading = false;
        }
    })
}

</script>
<style lang="scss" scoped>
@import "@/assets/style/login.scss";
</style>